<template>
  <div id="app">
    <h1>剩余抽奖次数：{{ num }}</h1>
    <round-turntable
      ref="roundTurntable"
      :prizeData="userHistory"
      :rotateCircle="rotateCircle"
      :duringTime="duringTime"
      :turntableStyleOption="turntableStyleOption"
      @endRotation="endRotation"
      class="turntable">
      <template slot="item" slot-scope="scope">
        <div class="turntable-name">{{ scope.item.ordertea }}</div>
        <div class="turntable-img">
          <img :src="scope.item.ima">
        </div>
      </template>
    </round-turntable>
    <div @click="startRotation" class="pointer"></div>
  </div>
</template>

<script>
  import roundTurntable from '@/component/roundTurntable.vue';
import axios from 'axios';
import { onMounted } from 'vue';
  export default {
    // name: 'App',
    components: {
      roundTurntable
    },
    data() {
      return {
        // 转盘上的奖品数据
        userHistory:[],
        prizeData: [
          {
            id: 1,
            prizeName: '2000元京东券',
            prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/1.png',
          },
          {
            id: 2,
            prizeName: '300元京东券',
            prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/7.png',
          },
          {
            id: 3,
            prizeName: '50个比特币',
            prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/3.png',
          },
          {
            id: 4,
            prizeName: '50元话费券',
            prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/4.png',
          },
          {
            id: 5,
            prizeName: '100元话费券',
            prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/5.png',
          },
          {
            id: 6,
            prizeName: '100个比特币',
            prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/6.png',
          }
        ],
        // 转动的圈数
        rotateCircle: 6,
        // 转动需要持续的时间（s）
        duringTime: 4.5,
        // 转盘样式的选项
        turntableStyleOption: {
          // 背景色
          prizeBgColors: ['#AE3EFF', '#4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F'],
          // 转盘的外边框颜色
          borderColor: '#199301',
        },

        // 中奖的奖品的index
        prizeIndex: -1,
        // 用来锁定转盘，避免同时多次点击转动
        isLocking: false,

        // 剩余抽奖次数
        num: 2,
      }
    },
    created(){
      this.getData()
    },
    methods: {
      async getData() {
      // const kw = this.search ? `/?id=${this.search}` : "";
      const res = await axios.get("http://localhost:3030/order?$limit=100");
      const { status, data } = res;
      if (status === 200) {
        console.log("data.data", data.data);
        return this.userHistory = data.data

      }
      return ElMessage.error("抓取不到信息...");
    },
      startRotation() {
        // 如果还不可以转动
        if (!this.canBeRotated()) {
          return false;
        }
        // 开始转动
        // 先上锁
        this.isLocking = true;
        // 设置在哪里停下，应该与后台交互，这里随机抽取0~5
        const index = Math.floor(Math.random() * this.userHistory.length);
        // 成功后次数减少一次
        this.num--;
        this.prizeIndex = index;
        // 告诉子组件，开始转动了
        this.$refs.roundTurntable.rotate(index);
      },
      // 已经转动完转盘触发的函数
      endRotation() {
        // 提示中奖
        alert(`恭喜您获奖啦,您的奖品是：${this.userHistory[this.prizeIndex].ordertea}`);
        // 解锁
        this.isLocking = false;
      },
      // 判断是否可以转动
      canBeRotated() {
        if (this.num <= 0) {
          alert('已经木有次数了！');
          return false;
        }
        if (this.isLocking) {
          return false;
        }
        return true;
      },
    },
    onMounted(){
      this.getData()
    }
  }
</script>

<style lang="scss">
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin: 0;
    padding: 0;
    .turntable {
      position: absolute;
      left: calc(50% - 200px);
      top: calc(50% - 200px);
      width: 400px;
      height: 400px;
    }
    .turntable-name {
      /*background: pink;*/
      position: absolute;
      left: 10px;
      top: 20px;
      width: calc(100% - 20px);
      font-size: 26px;
      text-align: center;
      color: #fff;
    }

    .turntable-img {
      position: absolute;
      /*要居中就要50% - 宽度 / 2*/
      left: calc(50% - 80px / 2);
      top: 60px;
      width: 80px;
      height: 80px;
      img {
        display: inline-block;
        width: 100%;
        height: 100%;
      }
    }

    .pointer {
      position: absolute;
      left: calc(50% - 46px);
      top: calc(50% - 50px);
      width: 100px;
      height: 100px;
      background-image: url("http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/start.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
</style>
